<style lang="less">
  @import './style.less';
</style>
<template>
	<div class="container">
		<div class="nav">
			<ul>
				<li><a @click="$router.push({name: 'rule'})" href="javascript:;">活动规则</a></li>
				<li class="active"><a href="javascript:;">我的奖品</a></li>
			</ul>
			<span class="close" @click="$router.push({name: 'index'})"></span>
		</div>
		<div class="cont">
			
			<template v-if="prizeArr.length > 0">
				<div class="jp-card"  v-for="(row, index) in prizeArr">
					<a href="javascript:;" @click="turnTo(row)">
						<div>
							<h1>{{row.level}}：{{row.name}}</h1>
							<div v-if="row.isShow">
								<p class="time">兑奖期限：{{row.timeBeg}}至{{row.timeEnd}}</p>
								<!-- <p class="time">兑奖日期：<span v-for="rowDate in row.canUseDate">{{rowDate}}&nbsp;</span></p>
								<p class="time">可用时段：{{row.canUseTime[0]}}至{{row.canUseTime[1]}}</p> -->
							</div>
							<p>
								<small v-if="row.status == 0">
									未核销
								</small>
								<small v-else class="success">
									已核销
								</small>
							</p>
							<span class="jp-card-hot"><img src="http://www.ihuyi.com/hd-temp/choujiang/images/hot.gif" width="100%"></span>
						</div>
					</a>
				</div>
			</template>
			<template v-else>
				暂无中奖纪录～
			</template>

			<div class="lianxi-cont" v-if="contact">
				<div class="titleLine"><span class="title">联系信息</span></div>
				<div class="lianxi-group">
					<div class="lianxiItem" v-for="(row, index) in contact">{{index}}：<span>{{row}}</span></div>
					<div class="edit" @click="$router.push({name: 'contact'})">修改</div>
				</div>
			</div>
			
		</div>
		<div class="ad tc">
			<div class="cont">
				<a v-if="setting.functionRadio == 2" href="javascript:;" class="guanzhu" @click="handleFollow">{{setting.qrButtonName}}</a>
				<a v-if="setting.functionRadio == 1" :href="setting.buttonUrl" class="guanzhu">{{setting.buttonName}}</a>
				<a href="javascript:;" class="chuangjian">我也要创建此活动</a>
			</div>
		</div>
		<Modal footer-hide v-model="followStatus" :styles="{width: '70% !important',margin: 'auto',top: '40px'}">
			<div style="padding:10px 30px 0"><img :src="setting.qrCodeImg" width="100% "></div>
			<div style="padding:0 30px 10px"><img src="http://www.ihuyi.com/hd-temp/choujiang/images/changancode.gif" width="100%"></div>
		</Modal>
	</div>
</template>
<script>
	import * as backApi from '@/api/play'
    export default {
        data () {
            return {
				followStatus: false,
				prizeArr: [],
				contact: 0,
				setting: [],
            }
		},
		created () {

			this.htRem();
			let _this 	= this;
			window.onresize = function() {
				_this.htRem();
			};

			//初始化页面
			_this.initActivity();
		},
		methods: {
			//初始化页面数据
			initActivity () {
				let queryData 	= {};
				let _this 		= this;
				backApi.prize(queryData).then(res => {
					if (res.data.code == 1) {
						this.prizeArr 	= res.data.prizeArr;
						this.contact 	= res.data.contact;
						this.setting 	= res.data.setting;
					} else if (res.data.code == 2) {
						let config 		= {
							content: 	res.data.message,
							onClose () {
								_this.$router.push({name: 'index'});
							}
						};
						this.$Message.error(config);
					} else {
						this.$router.push({name: '500'})
					}
				});
			},
			htRem () {
				var clientWidth = document.documentElement.clientWidth;
				if (clientWidth > 750) {
					clientWidth = 750;
				}
				document.documentElement.style.fontSize = 20 * (clientWidth / 320) + 'px';   
			},
			//跳转至每个不同的兑奖页面
			turnTo (row) {
				let query 	= {winnerNum: row.winnerNum};
				let router	= 'jiangpin_detail'; 
				this.$router.push({name: router, query: query})
			},
			handleFollow () {
				this.followStatus 	= true;
			}
		}
	};
</script>
